<!DOCTYPE html>
<html>

<head>
    <#import "../common/common.macro.ftl" as netCommon>
    <title>艺术上海-购物车</title>
    <meta charset="utf-8" />

    <base target="_blank">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link href="/static/css/bootstrap.mini.css" rel="stylesheet" />
    <link href="/static/css/style.css" rel="stylesheet" />
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/font-face.css" rel="stylesheet" />
    <link href="/static/css/common/index.css" rel="stylesheet" />
    <link href="/static/css/footer/index.css" rel="stylesheet" />
    <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
    <style>
        .app-containter{
            width: 1440px;
            margin: 0 auto;
        }
        .app-containter-top{
            width: 100%;
        }
        .app-containter-top p{
            margin: 0;
            padding: 0;
            display: block;
        }
        .section-index{
            background: #fff;
        }

        .app-containter-box{
            padding: 50px 0px;
        }

        .app-containter-box h3{
            text-align: left;
            padding-bottom: 10px;
            border-bottom: 1px #eee solid;
        }

        .cart-list-box{
            padding: 20px 0px;
            clear: both;

        }

        .cart-list-box-item{
            display: flex;
            width: 100%;
            height: 180px;
            align-items: flex-start;
            justify-content: flex-start;
            padding-bottom: 20px;
            border-bottom: 1px #eee solid;
            margin-bottom: 20px;
        }

        .cart-list-box-item-image {
            width: 200px;
            height: 200px;
        }
        .cart-list-box-item-image img{
            width: 160px;
            height: 160px;
            object-fit: cover;

        }

        .cart-list-box-item-info{
            width: 250px;

        }

        .cart-list-box-item-control {
            flex:1;
            text-align: right;
            height: 100%;
        }

        .cart-list-box-item-btn{
            width: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .cart-list-box-item-btn-circle{
            border-radius: 50%;
            width: 24px;
            height: 24px;
            background: #fff;
            border: 4px solid #ac2925;
        }

        .cart-list-box-item-btn-circle-actived{
            border-radius: 50%;
            width: 24px;
            height: 24px;
            background: #ac2925;
            border: 4px solid #ac2925;
        }

        .cart-list-box-item-info h3{
            font-size: 18px;
            font-weight: bold;
            line-height: 1.4;
        }

        .btn-del{
            display: block;
            padding: 6px 10px;
            margin-top: 80px;
            float: right;
            cursor: pointer;
        }

        .price{
            font-weight: bold;
        }

        .footer-fixed{
            width: 100%;
            margin: 0 auto;
            position: fixed;
            bottom: 0px;
            height: 60px;
        }

        .footer-cart-box{
            width: 960px;
            margin:  0 auto;
            height: 60px;
            background: #fafafa;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .footer-cart-box-select{
            width: 30%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }


        .footer-cart-box-select-option{
            width: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .footer-cart-box-select-option .cart-list-box-item-btn-circle{
            margin-right: 10px;
        }

        .footer-cart-box-select-box{
            width: 60%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .footer-cart-box-select-box-btn {
            width: 120px;
            height: 60px;
            background: #ac2925;
            color: #fff;
            font-size: 18px;
            line-height: 60px;
            text-align: center;
        }

        .footer-cart-box-select-box-price{
            font-size: 20px;
            margin-right: 30px;
            font-weight: bold;
        }


    </style>
</head>

<body >

<@netCommon.commonHeader "艺术视野" menu i18n/>

<div class="section-index" style="  margin-top: 110px; ">
    <div class="app-containter" style=" width: 960px; margin: 0 auto">
        <div class="app-containter-box">
            <h3>购物车</h3>
        </div>
        <div class="cart-list-box" id="cart-list-box">

        </div>
    </div>
</div>

<div class="footer-fixed">
        <div class="footer-cart-box">
            <div class="footer-cart-box-select">
                <div class="footer-cart-box-select-option">
                    <div class="cart-list-box-item-btn-circle" id="sel-all"></div> 全选
                </div>
            </div>
            <div class="footer-cart-box-select-box">
                <div class="footer-cart-box-select-box-price">¥0</div>
                <div class="footer-cart-box-select-box-btn">结算</div>
            </div>
        </div>
</div>
<script id="tp_track_list" type="text/x-handlebars-template">

    {{#each this}}

        {{#each items}}
        <div class="cart-list-box-item" id="cart-{{id}}">
            <div class="cart-list-box-item-btn">
                <div class="cart-list-box-item-btn-circle cart-items"  data-id="{{id}}" data-sel="true"></div>
            </div>
            <div class="cart-list-box-item-image">
                <img src="{{productImage}}" />
            </div>
            <div class="cart-list-box-item-info">
                <h3>{{productName}}</h3>
                <p>
                    {{#if artists}}
                        {{#each artists}}
                            {{name}}
                        {{/each}}
                    {{/if}}

                </p>
                <p>
                    {{#if bizValue6}}
                    {{bizValue6}}
                    {{/if}}
                    {{#if bizValue6}}
                    x {{bizValue6}}cm
                    {{/if}}

                </p>
                <p style="margin-top: 20px">
                    {{#if freightFee}}
                    运费: {{freightFee}}元 <br/>
                    {{/if}}
                    {{#if framePrice}}
                    裱框费: {{framePrice}}元
                    {{/if}}
                </p>
            </div>
            <div class="cart-list-box-item-control">
                <p class="price">¥{{price}}<br/>

                </p>

                <span class="btn-del" style="width: 80px;margin-top: 100px" data-id="{{id}}">删除</span>
            </div>
        </div>
        {{/each}}
    {{/each}}
</script>

</body>

<@netCommon.commonScript />
<script src="/static/js/handlebars.js"></script>
<script>
    var list = [];
    var nums = 0;
    var tpl = $("#tp_track_list").html();

    var money = 0;
    var framePrice = 0;
    var freightFee = 0;
    var total = 0;


    $(function () {
        queryCart();
    })


    var items = [];

    function queryCart() {
        var params = {}
        $.ajax({
            type: "post",
            url: baseUrl+"api/shop-center/app/mall/cart/query",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            headers: {
                'lbv': '1.0',
                'tenant' : 'PTC',
                'token':  getToken(),
            },
            data: JSON.stringify(params),
            success: function (res) {
                if(res && res.code && res.code=='0' && res.data){
                    debugger;
                    list = res.data;
                    if(list && list.length>0){
                        var tpl = $("#tp_track_list").html();
                        var template = Handlebars.compile(tpl);
                        var html = template(list);
                        $('#cart-list-box').html(html);
                        bindEvent();
                    }
                    nums = 0;
                    for(var i=0; i<list.length; i++){
                        if(list[i].items ){
                            nums = nums + list[i].items.length;
                        }
                    }


                }
                else{
                        alert(res.msg);
                        if(res.code=='-3'){
                            relogin(window.location.href);
                        }
                        
                    }

            },
            error: function (res) {

            }
        });
    }
    
    function  getMoney() {
        total = 0;
        freightFee = 0;
        framePrice = 0;
        money = 0;
        for(var i=0; i<list.length; i++){
            if(list[i].items){
                var arr = list[i].items
                for(var j=0; j<arr.length; j++){
                    for(var k=0; k<items.length; k++){
                       if(items[k] == arr[j].id){
                            money = money +  arr[j].price;
                            if(arr[j].framePrice && arr[j].framePrice !=''){
                                framePrice = framePrice + arr[j].framePrice
                            }
                           if(arr[j].freightFee && arr[j].freightFee !=''){
                               freightFee = freightFee + arr[j].freightFee
                           }

                           total = money + framePrice + freightFee;
                       }
                    }
                }
            }
        }
        $('.footer-cart-box-select-box-price').html('¥'+total);
    }

    function  bindEvent() {
        $(".cart-items").click(function () {
            var params = {}
            var ids = $(this).attr("data-id");
            var isExist = false;
            for(var i=0; i<items.length; i++){
                if(items[i] == ids){
                    items.splice(i,1)
                    $(this).removeClass('cart-list-box-item-btn-circle-actived')
                    isExist = true
                    break
                }

            }
            if(!isExist){
                $(this).addClass('cart-list-box-item-btn-circle-actived')
                items.push(ids)
            }
            debugger;

            if(items.length == nums){
                $('#sel-all').addClass('cart-list-box-item-btn-circle-actived')
            }else{

                $('.footer-cart-box-select-box-price').html('¥0');
                $('#sel-all').removeClass('cart-list-box-item-btn-circle-actived')
            }

            getMoney();


        })

        $("#sel-all").click(function () {
            debugger;
            if(items.length == nums){
                $('#sel-all').removeClass('cart-list-box-item-btn-circle-actived')
                $(".cart-items").removeClass('cart-list-box-item-btn-circle-actived')
                $('.footer-cart-box-select-box-price').html('¥0');

                items = [];
            }else{
                $('#sel-all').addClass('cart-list-box-item-btn-circle-actived')
                $(".cart-items").addClass('cart-list-box-item-btn-circle-actived')

                items = [];
                for(var i=0; i<list.length; i++){
                    if(list[i].items){
                        var arr = list[i].items
                        for(var j=0; j<arr.length; j++){
                            items.push(arr[j].id)
                        }
                    }
                }
            }

            getMoney();
        })

        $(".footer-cart-box-select-box-btn").click(function () {
            if(items.length===0){
                return;
            }
            console.log(JSON.stringify(items))
            var plist = [];
            for(var i=0; i<list.length; i++){
                if(list[i].items){
                    var arr = list[i].items
                    for(var j=0; j<arr.length; j++){
                        for(var k=0; k<items.length; k++){
                            debugger;
                            if(items[k] == arr[j].id){
                                arr[j].companyNo = list[i].companyNo
                                plist.push(arr[j])

                            }
                        }
                    }
                }
            }
            console.log(JSON.stringify(plist));
            localStorage.setItem('cartItems',JSON.stringify(plist));
           // return;;
            window.location.href ='/order/create2';
        })




        $(".btn-del").click(function () {
            var ids = $(this).attr('data-id');
            var params = {}
            $.ajax({
                type: "get",
                url: baseUrl+"api/shop-center/app/mall/cart/delete?id="+ids,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                headers: {
                    'lbv': '1.0',
                    'tenant' : 'PTC',
                    'token':  getToken(),
                },

                success: function (res) {
                    if(res && res.code && res.code=='0'){
                        debugger;
                        $("#cart-"+ids).remove()
                    }
                    else{
                        alert(res.msg);
                        if(res.code=='-3'){
                            relogin(window.location.href);
                        }
                        
                    }
                },
                error: function (res) {

                }
            });
        })
    }


</script>


</html>